<template>
  <el-table
    :data="basicInfos"
    style="width: 100%"
    :row-class-name="tableRowClassName">
    <el-table-column
      prop="basicId"
      label="编号"
      width="180">
    </el-table-column>

    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>

    <el-table-column
      prop="age"
      label="年龄"
      width="180">
    </el-table-column>

    <el-table-column
      prop="birthday"
      label="生日"
      width="180">
    </el-table-column>

    <el-table-column
      prop="sex"
      label="性别"
      width="180">
    </el-table-column>

    <el-table-column
      prop="relationship"
      label="关系"
      width="180">
    </el-table-column>

    <el-table-column
      prop="weight"
      label="体重"
      width="180">
    </el-table-column>

    <el-table-column
      prop="height"
      label="身高"
      width="180">
    </el-table-column>

    <el-table-column
      prop="income"
      label="收入"
      width="180">
    </el-table-column>

    <el-table-column
      prop="relationship"
      label="关系"
      width="100"
      :filters="[{ text: '同学', value: '同学' }, { text: '家人', value: '家人' }]"
      :filter-method="filterTag"
      filter-placement="bottom-end">
      <template slot-scope="scope">
        <el-tag
          :type="scope.row.relationship === '家人' ? 'primary' : 'success'"
          disable-transitions>{{scope.row.relationship}}</el-tag>
      </template>
    </el-table-column>

  </el-table>
</template>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>

<script>
  export default {
    data() {
      return {
        basicInfos: [
          {
            basicId: "",
            name: "",
            age: "",
            birthday: "",
            sex: "",
            relationship: "",
            weight: "",
            height: "",
            income: "",
          }
        ],
        basicInfo: {
          basicId: "",
          name: "",
          age: "",
          birthday: "",
          sex: "",
          relationship: "",
          weight: "",
          height: "",
          income: "",
        }
      }
    },
    created: function() {
      this.GetBasicInfo();
    },
    methods: {
      filterTag(value, row) {
        return row.tag === value;
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      GetBasicInfo(){
        const constinfo = this.$http
          .get('basicInfo')
          .then(tm =>{
            this.basicInfos = tm.data.data.records
          })
      }
    }
  }
</script>
